<template>
   <view
    style="
      background-color: #fff;
      border-top: 1px solid #eee;
      color: #777;
      font-size: 28rpx;
      padding-bottom: 20px;
    "
  >
    <u-navbar title="充值月票" bgColor="#fff" :autoBack="true" :fixed="false">
    </u-navbar>
    <view style="display: flex; padding: 0 33rpx; margin-top: 30rpx">
      <view style="font-size: 34rpx; color: #999; line-height: 48rpx">
        余额：<span style="font-weight: bold; color: #333; font-size: 34rpx">{{
          userinfo.ticket + "月票"
        }}</span>
      </view>
      <!-- <view style="color: #2796ff" @click="guize()"> 查看《使用规则》 </view> -->
    </view>
    <view
      style="
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 32rpx 24rpx;
        border-top-left-radius: 12rpx;
        border-top-right-radius: 12rpx;
        margin-top: -7rpx;
      "
    >
      <view
        class="boxItem"
        v-for="(item, index) in list"
        :key="index"
        @click="listIndex = index"
        :class="{ inactive: listIndex === index ? true : false }"
        style="
          display: flex;
          margin-bottom: 30rpx;
          width: 100%;
          align-items: center;
        "
      >
        <image
          src="./Images/ticket.png"
          style="width: 86rpx; height: 54rpx; margin-left: 33rpx"
        />
        <view style="margin-top: -12rpx;margin-left: 30rpx;">
          <text>{{ item.nums }}</text>
        </view>
        <view
          style="
            position: absolute;
            right: 58rpx;
            top: 39rpx;
            font-size: 24rpx;
            color: #fff;
            line-height: 59rpx;
          "
        >
          <text>￥</text>
          <text style="font-size: 36rpx;">{{ item.rmb }}</text>
        </view>
      </view>
    </view>
    <view class="payCard">
      <view class="">选择支付方式</view>
      <view style="margin-top: 24rpx; margin-right: 40rpx">
        <view
          @click="data.is_alipay == 1 ? (pay_type = 1) : ''"
          style="
            display: flex;
            height: 108rpx;
            justify-content: space-between;
            line-height: 108rpx;
          "
        >
          <view style="display: flex; align-items: center">
            <!-- <image
              src="/static/ucenter/alipay.png"
              style="height: 48rpx; width: 48rpx; vertical-align: middle"
            ></image> -->
            <u-icon
              name="zhifubao-circle-fill"
              color="#1296db"
              size="24"
            ></u-icon>
            <text
              style="
                font-size: 32rpx;
                vertical-align: middle;
                color: rgba(51, 51, 51, 1);
                margin-left: 20rpx;
              "
            >
              {{ data.is_alipay == 1 ? "支付宝" : "支付宝(暂不支持)" }}
            </text>
          </view>
          <view style="display: flex; margin: auto 0 auto auto">
            <image
              :src="
                pay_type == 1
                  ? '/static/image/mkz_ic_pay_choose_on.png'
                  : '/static/image/mkz_ic_pay_choose_off.png'
              "
              style="width: 40rpx; height: 40rpx"
            ></image>
          </view>
        </view>
      </view>
      <view style="">
        <view class="footer">
          <view class="buyBtn" @click="buy()"> 立即支付 </view>
        </view>
      </view>
    </view>

    <u-popup
      mode="bottom"
      :show="pop_show"
      :round="16"
      :closeOnClickOverlay="false"
    >
      <view style="display: flex; flex-direction: column; width: 100%">
        <view
          style="
            display: flex;
            height: 100rpx;
            justify-content: space-between;
            line-height: 100rpx;
            padding: 0 30rpx 0 30rpx;
          "
        >
          <view
            style="
              display: inline-block;
              font-size: 32rpx;
              font-weight: 500;
              color: #000;
            "
          >
            <text>{{ pop_title }}</text>
          </view>
          <view style="display: flex; margin: auto 0" @click="pop_show = false">
            <u-icon color="#777777" size="16" name="close"></u-icon>
          </view>
        </view>
        <scroll-view
          style="padding: 0 30rpx; width: calc(100% - 60rpx); height: 70vh"
          scroll-y="true"
        >
          <text v-html="pop_content"></text>
        </scroll-view>
        <view style="height: 10px"></view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import w_md5 from "../../../js_sdk/zww-md5/w_md5.js";
import bg from "./Images/ticket.png";
export default {
  components: {
    w_md5,
  },
  data() {
    return {
      pop_show: false,
      list: [],
      listIndex: 0,
      pay_type: 1, //1=支付宝，2=微信，3=QQ
      agree: false,
      pop_title: "充值服务协议",
      pop_content: "",
      userinfo: "",
      data: {},
      bg,
    };
  },
  onBackPress(e) {
    console.log(e);
    if (e.from == "backbutton") {
      if (this.pop_show) {
        this.pop_show = false;
      } else {
        uni.navigateBack({});
      }
      return true;
    }
  },
  onLoad() {
    this.req_data();
  },
  methods: {
    xieyi() {
      this.pop_title = "充值服务协议";
      this.pop_content = uni.getStorageSync("txt").payagreement;
      this.pop_show = true;
    },
    guize() {
      this.pop_title = "使用规则";
      this.pop_content = "使用规则内容哈哈哈";
      this.pop_show = true;
    },
    // 获取充值内容
    req_data() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;
      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&timestamp=" +
        time +
        "&user_id=" +
        uni.getStorageSync("user").uid +
        "&user_token=" +
        uni.getStorageSync("user").utoken;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/pay/init?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log("数据: ", res.data);
          if (res.data.code == 1) {
            this.userinfo = res.data.user;
            this.list = res.data.ticketlist;
            this.data = res.data;
          } else {
            uni.showToast({
              icon: "none",
              position: "bottom",
              title: "请求失败",
            });
            uni.navigateBack({});
          }
          // this.get_comment_list()
        },
      });
    },
    // 立即支付
    buy() {
      // if (!this.agree) {
      //   uni.showToast({
      //     icon: "none",
      //     position: "bottom",
      //     title: "请先同意服务协议",
      //   });
      //   return;
      // }
      let payType = "alipay";
      if (this.pay_type == 1) {
        payType = "alipay";
      } else if (this.pay_type == 2) {
        payType = "wxpay";
      } else if (this.pay_type == 3) {
        payType = "qqpay";
      }
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;
      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&num=" +
        this.list[this.listIndex].nums +
        "&pay=" +
        payType +
        "&rmb=" +
        this.list[this.listIndex].rmb +
        "&timestamp=" +
        time +
        "&type=ticket&user_id=" +
        uni.getStorageSync("user").uid +
        "&user_token=" +
        uni.getStorageSync("user").utoken;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/pay/save?" +
          param +
          "&sign=" +
          sign,
        success: (resdata) => {
          if (resdata.data.code != -1) {
            uni.getProvider({
              service: "payment",
              success: function (res) {
                console.log(res.provider);
                if (res.provider && res.provider.indexOf("alipay") !== -1) {
                  uni.requestPayment({
                    provider: "alipay", //固定值为"alipay"
                    orderInfo: resdata.data.payurl, //此处为服务器返回的订单信息字符串
                    success: function (res) {
                      var rawdata = JSON.parse(res.rawdata);
                      console.log("支付成功");
                    },
                    fail: function (err) {
                      console.log("支付失败:" + JSON.stringify(err));
                    },
                  });
                } else {
                  console.log("未找到支付宝服务提供商");
                }
              },
              fail: function (error) {
                console.log("获取支付服务失败:", error);
              },
            });
          } else {
            uni.showToast({
              icon: "none",
              position: "bottom",
              title: resdata.data.msg,
            });
          }
          // uni.showModal({
          // 	content: JSON.stringify(res.data)
          // })
          // #ifndef H5
          // uni.navigateTo({
          //   url: "../../webview/webview?uri=" + res.data.payurl,
          // });
          // #endif
          // #ifdef H5
          // const system = uni.getSystemInfoSync();
          //其实不用判断设备类型直接都使用window.location.href也行，个人觉得window.open是打开新窗口，如果能用可能更好一点
          // if (system.platform == "ios") {
          //   //如果是iOS平台(window.open在ios平台会被拦截)
          //   window.location.href = res.data.payurl;
          // } else {
          //   window.open(res.data.payurl);
          // }
          // #endif
          // this.get_comment_list()
        },
      });
    },
  },
};
</script>

<style>
page {
  min-height: 100vh;
}
.boxItem {
  background: #fff;
  display: flex;
  height: 137rpx;
  /* justify-content: space-around; */
  /* margin-bottom: 32rpx;
  margin-right: 21rpx; */
  position: relative;
  text-align: center;
  width: 210rpx;
  box-sizing: border-box;
  background-image: url("./Images/unselect.png");
  background-size: 100% 100%;
}
.tip {
  background: #fff9f2;
  border-radius: 8rpx;
  color: #111;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 44rpx;
  margin: 0 30rpx 40rpx;
  padding: 20rpx;
  text-align: center;
}
.payCard {
  color: #000;
  font-size: 32rpx;
  font-weight: 500;
  margin: 42rpx 0 0;
  padding-bottom: 24rpx;
  padding: 0 24rpx;
}
.inactive {
  background-image: url("./Images/select.png");
  background-size: 100% 100%;
}
.footer {
  background-color: #fff;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  overflow: hidden;
  /* padding: 16rpx 40rpx 20rpx; */
  text-align: center;
  height: 96rpx;
  display: flex;
  align-items: center;
}
.buyBtn {
  width: 100%;
  height: 88rpx;

  background: linear-gradient(270deg, #4dcba5 0%, #6bd6b5 100%);
  border-radius: 44rpx;
  line-height: 88rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #fff;
  margin-right: 23rpx;
}
</style>
